<!--
 * @Author: your name
 * @Date: 2021-10-19 15:08:15
 * @LastEditTime: 2021-10-22 20:28:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\Home\home.vue
-->
<template>
  <div>
    <!-- <div class="header">
      <router-link to="/grabble">
        <van-search
          v-model="value"
          shape="round"
          background="#4fc08d"
          placeholder="科学 哲学"
        />
      </router-link>
      <span><img src="../../assets/img/more-icon.png" alt="" /></span>
    </div> -->
    <router-link to="/grabble">
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="科学哲学"
      >
        <template #action>
          <div class="r-icon">
            <img src="../../assets/img/play-img/liebiao.png" alt="" />
          </div>
        </template>
        <template #right-icon>
          <div @click="onSearch">
            <img src="../../assets/img/play-img/sousuo.png" alt="" />
          </div>
        </template>
      </van-search>
    </router-link>
    <van-tabs @click-tab="getindex" :active="active">
      <van-tab title="课程" class="class">
        <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white">
          <van-swipe-item v-for="item in bannerList" :key="item.id"
            ><img :src="item.imgUrl" alt=""
          /></van-swipe-item>
        </van-swipe>
        <div class="banner-text">
          <h3>直播课 · 重磅来袭</h3>
          <p>10月20日 20:00</p>
        </div>
        <van-grid :column-num="5" :border="false">
          <van-grid-item to="/class">
            <div class="img-box">
              <img src="../../../src/assets/img/icon-01.png" alt="" />
            </div>
            <p>榜单</p>
          </van-grid-item>
          <van-grid-item to="/class">
            <div class="img-box">
              <img src="../../../src/assets/img/icon-02.png" alt="" />
            </div>
            <p>心理学</p>
          </van-grid-item>
          <van-grid-item to="/class">
            <div class="img-box">
              <img src="../../../src/assets/img/icon-03.png" alt="" />
            </div>
            <p>传统文化</p>
          </van-grid-item>
          <van-grid-item to="/class">
            <div class="img-box">
              <img src="../../../src/assets/img/icon-04.png" alt="" />
            </div>
            <p>职场</p>
          </van-grid-item>
          <van-grid-item to="/class">
            <div class="img-box">
              <img src="../../../src/assets/img/icon-05.png" alt="" />
            </div>
            <p>全部分类</p>
          </van-grid-item>
        </van-grid>
        <div class="hotlist">
          <h3>热门课程<span @click="gophb">更多</span></h3>
          <div>
            <ul>
              <li
                v-for="item in hotList"
                :key="item.id"
                @click="godetail(item.id)"
              >
                <img :src="item.imgUrl" alt="" />
                <p>{{ item.title }}</p>
                <span>{{ item.name }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="selected">
          <h3>精选课程</h3>
          <ul>
            <li
              v-for="item in selectedList"
              :key="item.id"
              @click="godetail(item.id)"
            >
              <div class="img-l">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="text-r">
                <div class="text-top">
                  <div class="top">
                    <p>
                      {{ item.title }}
                    </p>
                    <span>{{ item.num }}已预约</span>
                  </div>
                  <i>{{ item.motto }}</i>
                </div>
                <div class="text-bot">
                  <p>{{ item.position }}</p>
                  <span v-if="item.price > 0"
                    >{{ item.pages }}讲/{{
                      Number(item.price).toFixed(2)
                    }}元</span
                  >
                  <span v-else>{{ item.pages }}讲/预约中</span>
                  <button v-if="item.price > 0">购买课程</button>
                  <button style="background: #ffb657" v-else>开始阅读</button>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <p class="foot-title">没有更多了哦</p>
      </van-tab>
      <van-tab title="听书">
        <div class="selected">
          <ul>
            <li
              v-for="item in listenbookList"
              :key="item.id"
              @click="onClickRead(item.id)"
            >
              <div class="img-l">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="text-r">
                <div class="text-top">
                  <div class="top">
                    <p>
                      {{ item.title }}
                    </p>
                    <span>{{ item.num }}已预约</span>
                  </div>
                  <i>{{ item.name }} · 解读</i>
                </div>
                <div class="text-bot">
                  <p>{{ item.label }}</p>
                  <span>{{ Number(item.price).toFixed(2) }}元 </span>
                  <button v-if="item.price > 0">立即购买</button>
                  <button style="background: #ffb657" v-else>立即收听</button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="电子书">
        <div class="selected">
          <ul>
            <li
              v-for="item in novelList"
              :key="item.id"
              @click="goelectronicBook(item.id)"
            >
              <div class="img-l">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="text-r">
                <div class="text-top">
                  <div class="top">
                    <p>
                      {{ item.title }}
                    </p>
                    <span>{{ item.num }}已预约</span>
                  </div>
                  <i>{{ item.name }}</i>
                </div>
                <div class="text-bot">
                  <p>{{ item.label }}</p>
                  <span>{{ Number(item.price).toFixed(2) }}元 </span>
                  <button v-if="item.price > 0">立即购买</button>
                  <button style="background: #ffb657" v-else>立即阅读</button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="会员享">
        <div class="vip-img">
          <img src="../../../src/assets/img/vip-bg.png" alt="" />
          <span>会员直通车·知识专享服务升级</span>
        </div>
        <div class="vip-text">
          <h5>2021年9月28日-2021年10月30日</h5>
          <div class="v1">
            <p>电子书连续包年,VIP限时特惠</p>
            <p>畅听海量会员精选书籍</p>
            <p>首次开通158/年,<span>年卡218元/年</span></p>
            <i @click="getvip">立刻加入</i>
            <a href="javascript:;">活动说明</a>
          </div>
          <h4>独家会员好书大集锦</h4>
          <div class="v2">
            <p>
              独家电子书&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重磅推荐
            </p>
            <p>会员专享好书&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;不容错过</p>
            <i>了解更多</i>
            <img
              src="https://anyc100-1300574279.cos.ap-shanghai.myqcloud.com/PFK/%E7%83%AD%E9%97%A8%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85%E9%A1%B5/%E7%83%AD%E9%97%A8%E5%88%86%E7%B1%BB04.png"
              alt=""
              class="img1"
            />
            <img
              src="https://anyc100-1300574279.cos.ap-shanghai.myqcloud.com/PFK/%E5%90%AC%E4%B9%A6%E9%9F%B3%E9%A2%91%E6%92%AD%E6%94%BE/%E5%90%AC%E4%B9%A6.png"
              alt=""
              class="img2"
            />
          </div>
          <h4>邀好友,得福利</h4>
          <div class="v3">
            <p>每邀请1位好友登录</p>
            <p>双方都可以获得3天电子书会员</p>
            <p>最多可以免费领60天电子书会员</p>
            <i>立刻邀请</i>
          </div>
        </div>
      </van-tab>
      <van-tab title="最新动态" class="tab-bg">
        <div class="notfound">
          <div class="picture">
            <img src="../../../src/assets/img/NotFound.png" alt="" />
          </div>
          <div class="text">
            <p>此课程还未上架，敬请期待</p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import {
  Tab,
  Tabs,
  Search,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Toast,
} from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  components: {
    vanTabs: Tabs,
    vanTab: Tab,
    vanSearch: Search,
    vanSwipe: Swipe,
    vanSwipeItem: SwipeItem,
    vanGrid: Grid,
    vanGridItem: GridItem,
  },

  setup() {
    const router = useRouter();
    const active = ref(0);
    const bannerList = ref([]);
    const hotList = ref([]);
    const selectedList = ref([]);
    const listenbookList = ref([]);
    const novelList = ref([]);
    const getbanner = () => {
      fetch("http://1.116.189.101:3000/api/banner")
        .then((response) => response.json())
        .then(async (res) => {
          if (res.status === 0) {
            bannerList.value = res.result;
          }
        });
    };
    const gethot = () => {
      fetch("http://1.116.189.101:3000/api/hot")
        .then((response) => response.json())
        .then(async (res) => {
          if (res.status === 0) {
            hotList.value = res.result;
          }
        });
    };
    const getselected = () => {
      fetch("http://1.116.189.101:3000/api/selected")
        .then((response) => response.json())
        .then(async (res) => {
          if (res.status === 0) {
            selectedList.value = res.result;
          }
        });
    };
    const getlistenbooks = () => {
      fetch("http://1.116.189.101:3000/api/listenbooks")
        .then((response) => response.json())
        .then(async (res) => {
          if (res.status === 0) {
            listenbookList.value = res.result;
          }
        });
    };
    const getnovel = () => {
      fetch("http://1.116.189.101:3000/api/novel")
        .then((response) => response.json())
        .then(async (res) => {
          if (res.status === 0) {
            novelList.value = res.result;
          }
        });
    };
    const godetail = (id) => {
      router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    };

    const goelectronicBook = (id) => {
      router.push({
        path: "/electronicBook",
        query: {
          id,
        },
      });
    };
    const gophb = () => {
      router.push("/classDetail");
    };
    const onClickRead = (id) => {
      router.push({
        path: "/listenAudio",
        query: {
          id,
        },
      });
    };
    const getvip = () => {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      setTimeout(() => {
        Toast.success("开通成功！");
      }, 2000);
    };
    //获取索引
    const goindex = () => {
      if (!localStorage.getItem("index")) {
        localStorage.setItem("index", 0);
      } else {
        active.value = JSON.parse(window.localStorage.getItem("index"));
      }
    };
    goindex();

    const getindex = (event) => {
      localStorage.setItem("index", event.name);
    };
    getbanner();
    gethot();
    getselected();
    getlistenbooks();
    getnovel();
    return {
      active,

      bannerList,
      hotList,
      selectedList,
      listenbookList,
      novelList,
      godetail,
      gophb,
      goelectronicBook,
      onClickRead,
      getvip,
      getindex,
    };
  },
};
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
// .header {
//   display: flex;
//   align-items: center;
//   height: 50px;
//   span {
//     display: inline-block;
//     background-color: #fff;
//     height: 100%;
//     width: 100%;
//     flex: 1;
//     display: flex;
//     align-items: center;
//     img {
//       width: 24px;
//       height: 16px;
//     }
//   }
// }
// 搜索框样式
.van-search {
  background-color: #fff;
  width: 100%;
}
/deep/.van-tabs__line {
  background-color: #4ab8fa;
  bottom: 20px;
}
/deep/.van-search__content {
  background-color: #ededed;
}
/deep/ .van-field__right-icon {
  margin-right: 2px;
  height: 18px;
  img {
    width: 15px;
    height: 15px;
  }
}
/deep/ .van-search__action {
  .r-icon {
    height: 26px;
  }
}
/deep/i::before {
  display: none;
}
//tab样式
/deep/ .van-tab__text {
  font-weight: bold;
  font-family: PingFang SC;
}
/deep/ .van-tab--active {
  font-size: 16px;
  font-weight: 600;
  color: #4ab8fa !important;
}
/deep/ .van-tabs__content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 94px;
  overflow-y: auto;
  padding-bottom: 143px;
}
//轮播图
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
  img {
    display: block;
    height: 180px;
    width: 100%;
  }
}
.class {
  position: relative;
}
.banner-text {
  color: #fff;
  font-size: 20px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  pointer-events: none;
  h3 {
    margin-bottom: 20px;
  }
}
//宫格
/deep/.van-grid-item__content {
  padding: 20px 10px 10px 10px;
}
.van-grid-item {
  .img-box {
    width: 40px;
    height: 40px;
    background-color: #4ab8fa;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  img {
    width: 20px;
    height: 20px;
    display: block;
    margin: 10px auto;
  }
  p {
    font-size: 12px;
  }
}
//热门
.hotlist {
  background-color: #fff;
  h3 {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 10px;
    span {
      font-size: 12px;
      color: #909090;
    }
  }
  ul {
    font-size: 0;
    display: flex;
    overflow-x: auto;
    padding: 10px 0 10px 10px;
    li {
      width: 75px;
      height: 140px;
      margin-right: 10px;
      img {
        width: 75px;
        height: 100px;
      }
      p {
        font-size: 16px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 90%;
        margin-bottom: 5px;
      }
      span {
        display: block;
        font-size: 12px;
        color: #646464;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 90%;
      }
    }
  }
}
//精选
.selected {
  background-color: #fff;
  padding: 0 10px;
  h3 {
    font-size: 16px;
  }
  ul {
    font-size: 0;
    overflow: auto;
    li {
      display: flex;
      padding: 10px 0;
      border-bottom: 0.5px #e1e1e1 solid;
      .img-l {
        width: 100px;
        height: 120px;
        img {
          width: 100px;
          height: 120px;
        }
      }
      .text-r {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding: 0 0 0 10px;
        .text-top {
          .top {
            display: flex;
            justify-content: space-between;
            p {
              font-size: 14px;
              font-weight: bold;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              width: 68%;
            }
            span {
              color: #909090;
              font-size: 12px;
            }
          }
          i {
            display: block;
            font-size: 12px;
            color: #646464;
            margin-top: 5px;
          }
        }
        .text-bot {
          position: relative;
          p {
            font-size: 14px;
            margin-bottom: 5px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 65%;
          }
          span {
            font-size: 12px;
            color: #909090;
          }
          button {
            transform: scale(0.9);
            font-size: 12px;
            position: absolute;
            right: 0;
            top: 8px;
            width: 80px;
            height: 30px;
            border: 0;
            border-radius: 50px;
            background-color: #ff7c35;
            color: #fefefe;
          }
        }
      }
    }
  }
}
.foot-title {
  text-align: center;
  font-size: 12px;
  color: #a09e9e;
  padding: 5px 0;
}
//会员享
.vip-img {
  width: 100%;
  height: 210px;
  font-size: 0;
  background-color: #fff;
  img {
    width: 100%;
    height: 180px;
  }
  span {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #909090;
  }
}
.vip-text {
  padding: 10px;
  background-color: #fff;
  h5 {
    font-size: 14px;
    color: #8a8787;
    text-align: center;
    line-height: 24px;
  }
  .v1 {
    width: 100%;
    background-color: #ff7c35;
    border-radius: 10px;
    text-align: center;
    font-size: 0;
    p {
      color: #fff;
      font-size: 14px;
      font-weight: 100;
      line-height: 30px;
    }
    p:nth-of-type(3) {
      font-weight: bold;
    }
    span {
      font-size: 12px;
      text-decoration: line-through;
    }
    i {
      color: #e10101;
      display: block;
      font-size: 12px;
      width: 80px;
      height: 20px;
      margin: 0 auto;
      background-color: #fff;
      line-height: 20px;
      border-radius: 10px;
      font-weight: bold;
      margin-top: 5px;
    }
    a {
      font-size: 12px;
      color: #ffdfcd;
      line-height: 40px;
    }
  }
  h4 {
    margin-top: 10px;
    font-size: 16px;
    color: #323232;
    text-align: center;
    line-height: 24px;
  }
  .v2 {
    width: 100%;
    background-color: #ff7c35;
    border-radius: 10px;
    text-align: center;
    font-size: 0;
    padding: 20px 120px 20px 20px;
    position: relative;
    p {
      color: #fff;
      font-size: 14px;
      font-weight: 100;
      line-height: 30px;
      font-weight: bold;
    }
    span {
      font-size: 12px;
      text-decoration: line-through;
    }
    i {
      color: #e10101;
      display: block;
      font-size: 12px;
      width: 80px;
      height: 20px;
      margin: 0 auto;
      background-color: #fff;
      line-height: 20px;
      border-radius: 10px;
      font-weight: bold;
      margin-top: 5px;
    }
    img {
      width: 60px;
      height: 85px;
    }
    .img1 {
      position: absolute;
      top: 10px;
      right: 45px;
      z-index: 1;
    }
    .img2 {
      position: absolute;
      top: 20px;
      right: 35px;
    }
  }
  .v3 {
    width: 100%;
    background-color: #ff7c35;
    border-radius: 10px;
    text-align: center;
    font-size: 0;
    padding: 15px;
    p {
      color: #fff;
      font-size: 14px;
      font-weight: 100;
      line-height: 30px;
    }
    span {
      font-size: 12px;
      text-decoration: line-through;
    }
    i {
      color: #e10101;
      display: block;
      font-size: 12px;
      width: 80px;
      height: 20px;
      margin: 0 auto;
      margin-top: 5px;
      background-color: #fff;
      line-height: 20px;
      border-radius: 10px;
      font-weight: bold;
    }
  }
}
.tab-bg {
  background: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
}
.notfound {
  padding-top: 140px;
  text-align: center;
  background: #fff;
  .picture {
    img {
      width: 290px;
      height: 240px;
    }
  }
  .text {
    font-size: 18px;
    color: #909090;
    padding-top: 30px;
  }
}
</style>
